<template>
  <div>
    <el-dialog
      title="提示"
      width="90%"
      top="5vh"
      :visible.sync="dialogVisible"
      :before-close="handleClose">
      <baidu-map 
        class="bm-view" 
        :center="infoWindow"
        :zoom="15"
        :scroll-wheel-zoom="true"
        @click="getLocation"
        > 
         <bm-marker :position="{lng: infoWindow.lng, lat: infoWindow.lat}" v-if="infoWindow.control" @click="infoWindowOpen" :dragging="true" >
          <bm-info-window :show="infoWindow.control&&infoWindow.address.length?infoWindow.show:false" @close="infoWindowClose" @open="infoWindowOpen">{{infoWindow.address}}</bm-info-window>
      <!-- <bm-label :content="infoWindow.address" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/> -->
    </bm-marker>
        <!-- 自动填充 -->
        <bm-auto-complete :sugStyle="{zIndex: 999999}">
          <div> 
            <!-- @change="confirmAddress" --> 
            <div  style="font-weight:600;font-size:20px;margin-bottom:10px;">地址：{{ inputValue }}</div>
            <!-- <el-input v-model="inputValue" disabled :placeholder="inputValue"  style="margin-bottom:10px;margin-right:10px;width:400px">{{inputValue}}</el-input> -->
            <!-- <el-button type="primary" @click="confirmAddress">搜索</el-button> -->
          </div>
          <div v-show="infoWindow.lng" style="font-weight:600;font-size:20px;margin-bottom:10px;">经度：{{ infoWindow.lng }}， 纬度：{{ infoWindow.lat }}</div>
          <!-- ， 地址：{{model.address}} -->
        </bm-auto-complete>
        
        <bm-view class="map" style="width: 100%; height:100%; flex: 1"></bm-view>
        <!-- 信息窗体 -->
        <!-- <bm-info-window 
        :position="{lng: infoWindow.lng, lat: infoWindow.lat}" 
        :title="infoWindow.title" 
        :show="infoWindow.show" 
        @close="infoWindowClose" 
        @open="infoWindowOpen">
          <p>经度：{{infoWindow.lng}}</p>
          <p>纬度：{{infoWindow.lat}}</p>
        </bm-info-window> -->
        <!-- 区域检索 -->
        <bm-local-search :keyword="keyword" :auto-viewport="true"  :panel="false">
        </bm-local-search>
        <!-- 定位控件 -->
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true" ref="geolocation"></bm-geolocation>
      </baidu-map>
      
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">确 定</el-button>
        <!-- ,inputValue ='' -->
        <!-- <el-button type="info" @click="dialogVisible = false">取 消</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data(){
    return {
      dialogVisible: false,
      inputValue: '',
      keyword: '',
      model: {},
      // infoWindow: {
      //   title: '',
      //   contents: '经纬度查询',
      //   show: false,
      //   lng: '',
      //   lat: '' 
      // }
    }
  },
  props:{
    infoWindow:{}
  },
  watch: {
    dialogVisible: function (newVal, oldVal) {
      if(newVal === true && this.infoWindow.lng == ''){
        this.$nextTick(() => {
          this.inputValue = this.infoWindow.address || '深圳市'
          // this.center = this.Address || '深圳市'
          if(this.inputValue != '')
            this.confirmAddress()
        })
      }
    }
  },
  mounted(){
    // if(this.dialogVisible)
    // if(this.infoWindow.lat == '')
    // this.inputValue = this.infoWindow.address
    
  },
  onload(){
    this.inputValue = ''
    // this.inputValue = this.infoWindow.contents
    // this.confirmAddress()
    // this.getLocation() 
  },
  methods: {
    handleClose(){
      this.$emit('childToParent', true);
      this.dialogVisible = false
    },
    // 搜索框的搜索事件
    confirmAddress(e) {
      this.infoWindow.lng = ''
      this.infoWindow.lat = ''
      if (this.inputValue != ''){
        this.keyword = this.inputValue
      }
      //为啥使用延时？？
      //因为上面搜索框是change事件，变化的太快了看起来效果不好所以添加了延时

      setTimeout(()=>{
      //搜索时把需要标点的地址传入local.search中
        var local = new BMap.LocalSearch(this.map, {
          renderOptions:{map: this.map}
        });
        local.search(this.keyword);
      },600)
    },
    getLocation(e){
      // 有经纬度传递不获取新的位置
      if(this.infoWindow.control)
        return
      this.infoWindowOpen()
      this.infoWindow.lng = e.point.lng
      this.infoWindow.lat = e.point.lat
      this.inputValue = '--'
    },
    infoWindowClose (e) {
      this.infoWindow.show = false
    },
    infoWindowOpen (e) {
      this.infoWindow.show = true
    },
    // baidu-map组件的ready事件
    mapReady ({BMap, map}) {
      this.BMap = BMap;
      this.map = map;
      geocoder = new BMap.Geocoder(); //创建地址解析器的实例
      if(this.model.hasOwnProperty('address')){//如果当前model中包含address 则证明是修改弹框里面的地址数据（地址存在，打开弹框显示地址标点）
        this.keyword = this.model.address
        this.inputValue = this.model.address
      }else{//否则显示默认标点（这里的经纬度代表成都）
      //第二个参数  10 代表地图缩 放级别,最大为19,最小为0
        setTimeout(() => {
              this.map.centerAndZoom(new BMap.Point(113.93588, 22.74894), 14);
        }, 1000);
        this.keyword = ''
        this.inputValue = ''
      }
      // 点击百度地图上的搜索出来的红色标记点
      map.addEventListener("click", ({ point }) => {
        this.location.lng = point.lng;
        this.location.lat = point.lat;
        geocoder.getLocation(point, res => {
          this.inputValue = res.address;
          this.model.address = res.address;
          this.model.storeLongitude = point.lng
          this.model.storeLatitude = point.lat
          this.$forceUpdate();
        });
      });
    },
  },
}
</script>

<style scoped>
.bm-view {
  width: 100%;
  height: 500px;
  margin-bottom:50px;
}
</style>